<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精密单摆重力加速度测量实验平台</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <!-- 左侧动画/仿真区  -->
        <section class="animation-section">
            <div class="animation-header">
                <h1 class="animation-title">单摆动画</h1>
                <div class="animation-status">
                    <div id="runStatus" class="run-status not-running">
                        <span class="status-dot"></span>
                        <span >未运行</span>
                    </div>
                </div>
            </div>
            <div class="canvas-container">
                <div class="timer-display">实验时间: <span id="timer">0.00</span> 秒</div>
                <div class="visual-scale-info"></div>
                <canvas id="pendulumCanvas" width="1400" height="1000"></canvas>
            </div>
            <div class="quick-instructions">
                <div class="instructions-title">快捷操作说明</div>
                <div class="instructions-list">
                    <div class="instruction-item">左键: 设定摆心</div>
                    <div class="instruction-item">右键: 设定坐标轴零点</div>
                    <div class="instruction-item">r: 设置角度零点</div>
                    <div class="instruction-item">p: 输出最近10条数据</div>
                    <div class="instruction-item">c: 校准HSV识别</div>
                    <div class="instruction-item">d: 删除参考点和参考角度</div>
                    <div class="instruction-item">l: 启动/终止串口通信</div>
                    <div class="instruction-item">x: 导出数据为json</div>
                </div>
            </div>
        </section>
        <!-- 中间控制面板 -->
        <section class="controls-section">
            <div class="camera-container">
                <h3>摄像头画面</h3>
                <div id="cameraWrapper">
                    <img id="cameraFeed" src="http://127.0.0.1:5000/video_feed" draggable="false" />
                    <div id="roiDiv"></div>
                </div>
                <div id="syncStatus">等待摄像头数据...</div>
            </div>
            <div class="control-group">
                <h2>实验参数设置</h2>
                <div class="slider-container">
                    <label>摆长 (cm): <span id="lengthValue" class="value-display">120.0</span></label>
                    <input type="range" id="length" min="30" max="165" value="120" step="1">
                </div>
                <div class="slider-container">
                    <label>角度 (°): <span id="angleValue" class="value-display">0.0</span></label>
                    <input type="range" id="angle" min="0" max="30" value="5" step="0.1">
                </div>
                <div class="slider-container">
                    <label>平滑: <span id="smoothingValue" class="value-display">0.8</span></label>
                    <input type="range" id="smoothingSlider" min="0.1" max="0.9" value="0.8" step="0.1">
                </div>
                <div class="slider-container">
                    <label>预测: <span id="predictionValue" class="value-display">0.12</span></label>
                    <input type="range" id="predictionSlider" min="0.05" max="0.2" value="0.12" step="0.01">
                </div>
            </div>
            <div class="control-group">
                <h2>实验控制</h2>
                <div class="btn-group">
                    <button id="startBtn">开始实验</button>
                    <button id="resetBtn">重置实验</button>
                    <button id="d0Btn">d0</button>
                    <button id="d1Btn">d1</button>
                    <button id="getPendulumLengthBtn">获取摆长数据</button>
                    <button id="getPendulumAngleBtn">获取角度数据</button>
                </div>
                <div class="status-display">
                    <div class="status-item">
                        <span class="status-label">累计时间:</span>
                        <span id="timer2" class="status-value">0.00</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">周期数:</span>
                        <span id="periodCount" class="status-value">0</span>
                    </div>
                </div>
            </div>
            <div class="control-group">
                <h2>运动控制</h2>
                <div class="btn-group">
                    <button id="btnUpM" class="btn-m">向上M</button>
                    <button id="btnDownM" class="btn-m">向下M</button>
                </div>
                <div class="btn-group">
                    <button id="btnUpU" class="btn-u">向上U</button>
                    <button id="btnDownU" class="btn-u">向下U</button>
                </div>
                <div class="btn-group">
                    <button id="btnUpN" class="btn-n">向上N</button>
                    <button id="btnDownN" class="btn-n">向下N</button>
                </div>
                <div class="btn-group">
                    <button id="btnClear" class="btn-opr">清除</button>
                    <input id="inputN" type="number" placeholder="n">
                    <button id="btnSendN" class="btn-opr">发送n</button>
                    <input id="inputM" type="number" placeholder="m">
                    <button id="btnSendM" class="btn-opr">发送m</button>
                </div>
            </div>
            <div class="control-group">
                <h2>同步状态</h2>
                <div class="status-display">
                    <div class="status-item">
                        <span class="status-label">状态:</span>
                        <span id="syncStatus2" class="status-value">🟡 等待连接</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">FPS:</span>
                        <span id="fpsDisplay" class="status-value">0</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">延迟:</span>
                        <span id="latencyDisplay" class="status-value">0ms</span>
                    </div>
                </div>
            </div>
        </section>
        <!-- 右侧图表和日志区 -->
        <section class="charts-section">
            <div class="chart-container">
                <div class="chart-title">角度-时间曲线</div>
                <div class="chart-canvas"><canvas id="angleChart" height="220"></canvas></div>
            </div>
            <div class="chart-container">
                <div class="chart-title">小球XY位置轨迹</div>
                <div class="chart-canvas"><canvas id="xyChart" height="220"></canvas></div>
                <div style="margin-top: 10px;">
                    <label style="font-size: 0.9rem; color: #94a3b8;">显示时长(秒): <span id="xyDurationValue">0.5</span></label>
                    <input type="range" id="xyDuration" min="0.1" max="2.0" value="0.5" step="0.1" style="width: 100%; margin-top: 5px;">
                </div>
            </div>
            <div class="logs-section">
                <div class="log-container">
                    <div class="log-title">单片机数据日志</div>
                    <div id="serialLog" class="log-content"></div>
                </div>
                <div class="log-container">
                    <div class="log-title">后端日志</div>
                    <div id="backendLog" class="log-content"></div>
                </div>
            </div>
        </section>
    </div>
    <div id="keyToast"></div>
    <script>
      console.log('index.html页面开始加载脚本');
    </script>
    <script src="js/chart.min.js"></script>
    <script type="module" src="js/websocket-client.js"></script>
    <script type="module" src="js/main.js"></script>
</body>
</html> 